<template>
  <div>
    <div v-for="item in list" :key="item.key" class="panel">
      <div class="panel-heading">
        <template v-if="item.level === 1">
          <user-avatar
            v-if="item.avatar"
            class="avatar"
            size="sm"
            :url="item.avatar"
            :vip-status="item.vipStatus"
            :official="item.official"
            @click.native="toSpace(item)"
          />
          <div class="user-info" @click="toSpace(item)">
            <span class="user-name" v-if="item.userName">{{ item.userName }}</span>
            <span class="extra" v-if="item.postTime">
              {{ item.postTime | howLong }}
              <span>{{ item.type | formatPostAction }}</span>
            </span>
          </div>
          <span v-if="item.isFollowed === 0" class="follow-btn"><i class="fa fa-plus"></i> 关注</span>
          <span v-else class="follow-btn disabled">已关注</span>
        </template>
        <template v-else>
          <span v-if="item.userName" class="user-name origin" @click="toSpace(item)">@{{ item.userName }}</span>
        </template>
      </div>
      <div class="panel-body">
        <template v-if="item.msg">
          <post-msg
            :id="item.id"
            :msg="item.msg"
            :topics="item.topics || []"
            :emojis="item.emojis || []"
            :ats="item.ats || []"
            :votes="item.votes"
            :lotterys="item.lotterys"
          />
        </template>
        <template v-if="item.pictures">
          <post-pictures
            :pictures="item.pictures"
          />
        </template>
        <template v-if="item.video">
          <post-video
            v-bind="item.video"
          />
        </template>
        <template v-if="item.bangumi">
          <post-bangumi
            v-bind="item.bangumi"
          />
        </template>
        <template v-if="item.article">
          <post-article
            v-bind="item.article"
          />
        </template>
        <template v-if="item.music">
          <post-music
            v-bind="item.music"
          />
        </template>
        <template v-if="item.daka">
          <post-daka
            v-bind="item.daka"
          />
        </template>
        <template v-if="item.live">
          <post-live
            v-bind="item.live"
          />
        </template>
        <template v-if="item.shortVideo">
          <post-short-video
            v-bind="item.shortVideo"
          />
        </template>
        <template v-if="item.origins">
          <template v-if="item.origins.length === 0 && item.miss === 1">
            <div class="missing"><i class="fa fa-ban"></i> 原动态失效了</div>
          </template>
          <template v-else>
            <post-items
              :list="item.origins"
            />
          </template>
        </template>
      </div>
      <template v-if="item.level === 1">
        <div class="panel-footer">
          <div class="col">
            <i class="fa fa-share"></i>{{ item.repost | formatNumber | formatString('转发') }}
          </div>
          <div class="col">
            <i class="fa fa-comment-o"></i>{{ item.reply | formatNumber | formatString('评论') }}
          </div>
          <div class="col">
            <i class="fa fa-nice"></i>{{ item.like | formatNumber | formatString('赞') }}
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import UserAvatar from '@/components/user-avatar/UserAvatar.vue'
import PostMsg from './PostMsg.vue'
import PostVideo from './PostVideo.vue'
import PostPictures from './PostPictures.vue'
import PostArticle from './PostArticle.vue'
import PostBangumi from './PostBangumi.vue'
import PostMusic from './PostMusic.vue'
import PostDaka from './PostDaka.vue'
import PostLive from './PostLive.vue'
import PostShortVideo from './PostShortVideo.vue'
import { formatNumber, howLong } from '@/filters/filters.js'
export default {
  name: 'PostItems',
  inject: ['rootRouter'],
  components: {
    UserAvatar,
    PostMsg,
    PostPictures,
    PostVideo,
    PostArticle,
    PostBangumi,
    PostMusic,
    PostDaka,
    PostLive,
    PostShortVideo
  },
  props: {
    list: {
      type: Array
    }
  },
  filters: {
    howLong,
    formatNumber,
    formatString (val, str) {
      if (val === 0) {
        return str
      } else {
        return val
      }
    },
    formatPostAction (type) {
      let str = ''
      switch (type) {
        case 8:
          str = ' · 投稿了视频'
          break
        case 16:
          str = ' · 投稿了小视频'
          break
        case 64:
          str = ' · 投搞了文章'
          break
      }
      return str
    }
  },
  methods: {
    toSpace (item) {
      const { type, mid } = item
      const notSpaces = [512, 4099, 4101]
      if (!notSpaces.includes(type)) {
        this.rootRouter.push({ name: 'space', params: { mid } })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .panel {
    border-bottom: rem(2px) solid $color-grey;
    background-color: $color-white;
    .follow-btn{
      padding: rem(10px);
      font-size: rem(13px);
      color: $theme-color;
      &.disabled{
        color: $color-text-secondary;
      }
    }
    &-heading{
      position: relative;
      display: flex;
      padding: rem(14px) rem(12px);
      .follow-btn {
        position: absolute;
        right: 0;
        top: 0;
      }
    }
    &-body{
      padding-bottom: rem(10px);
    }
    .user-info{
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      margin-left: rem(7px);
      .extra {
        color: $color-text-secondary;
        font-size: rem(12px);
      }
    }
    .user-name {
      color: $color-text-primary;
      font-size: rem(15px);
      &.origin{
        color: $color-primary;
      }
    }
    &-footer{
      display: flex;
      padding: 0 rem(10px) rem(10px);
      align-items: center;
      .col {
        flex: 1;
        color: $color-text-regular;
        font-size: rem(13px);
        text-align: center;
        .fa {
          margin-right: rem(5px);
        }
      }
    }
    .panel {
      border-bottom: 0;
      background-color: $color-grey;
    }
    .missing {
      background-color: $color-grey;
      color: $color-text-secondary;
      font-size: rem(15px);
      padding: rem(10px);
    }
  }
</style>
